import React from "react";
import {SearchOutlined} from "@ant-design/icons";
import {Button, Flex, Tooltip} from 'antd';

const Button1 = () => (
  /* Flex布局容器
     gap="small" 设置子元素间距为8px
     vertical 启用垂直排列模式 */
  <Flex gap="10px" vertical>
    {/* 容器
        wrap 允许子元素换行
        gap="small" 同样应用8px间距 */}
    <Flex wrap gap="small">
         {/* hover时显示'saarch' */}
      <Tooltip title="search">
        {/* primary将类型区别为主要类型，就是原来的颜色就是蓝色，就是主要
            shape可以改图标的形状，当前为圆形按钮，icon为搜索图标 */}
        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
        {/* 这个就是默认，颜色是正常的 */}
        <Button shape="circle" icon={<SearchOutlined />} />
      </Tooltip>

      <Button type="primary" shape="square">
        这就是AntDesign吗?
      </Button>
    </Flex>
  </Flex>
);
export default Button1;